@import "variable";
//@import "iconfont";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@font-face {
  font-family: 'Futura';
  src: url("~@/assets/fonts/futura.otf");
}
li,ul {
  list-style: none;
}
a {
  text-decoration: none;
}
.d-none {
  display: none !important;
}
.border-top {
  border-top: 1px solid #dbdbdb;
}
body {
  font-family: "Futura","Source Han Sans CN","PingFang SC","Microsoft YaHei","STSong","SimSun",Arial,sans-serif;
  color: #202020;
}
.bg-primary {
  background-color: $primary;
}
.bg-grey {
  background-color: #f5f5f5;
}
.fluid-img {
  max-width: 100%;
  height: auto;
}
.text-center {
  text-align: center;
}
.mt-30 {
  margin-top: 30px;
}
.section-header {
  position: relative;
  display: flex;
  padding-bottom: 30px;
  align-items: baseline;
  border-bottom: 1px solid #888;
  .section-title {
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      margin-top: -15px;
      left: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 15px 30px 15px;
      border-color: transparent transparent $primary transparent;
    }
    padding-left: 50px;
    position: relative;
    font-weight: 300;
    font-size: 40px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: auto;
    b {
      font-weight: 700;
    }
  }
}
main.page {
  .form-item {
    display: block;
    position: relative;
    &.observer {
      display: flex;
      justify-content: space-between;
    }
    label.form-control {
      position: relative;
      height: 50px;
      margin-top: 10px;
      font: 500 24px/2 "Futura";
      letter-spacing: .01em;
    }
    input{
      z-index: 2;
      top: 1px;
      left: 1px;
      display: block;
      width: calc(100% - 2px);
      height: 48px;
      border: 0;
      padding: 0;
      outline: 0;
      padding-left: 20px;
      background-color: transparent;
      font-size: 18px;
      font-weight: 500;
      font-family: "Futura";
      border: 1px solid gray;
      &.bg-primary {
        @extend .bg-primary;
        color: #fff;
      }
    }
    textarea {
      padding: 10px 20px;
      margin: 0;
      height: 150px;
      outline: 0;
      resize: none;
      min-height: 150px;
      display: block;
      width: 100%;
      border: 1px solid gray;
      font: 500 16px/2 "Futura";
      letter-spacing: .02em;
      color: #202020;
    }
    span.input-error {
      position: absolute;
    top: 100%;
    left: 0;
    font: 300 14px/20px "Futura";
    color: $primary;
    }
  }
  
  .term-item.active {
    text-decoration: underline;
  }
  .section-container {
    padding: 160px 0;
    .section-wrap {
      margin: 0 40px;
    }
    .btn-wrap {
      width: 100%;
      margin-top: 100px;
      text-align: center;
    }
  }
}
.page-category {
  padding: 10px 0;
  text-align: center;
  background-color: $primary;
  height: 80px;
  position: relative;
  padding: 0 40px;
  line-height: 80px;
  &.sticky {
    z-index: 10;
    position: sticky;
    top: 90px;
  }
  > * {
    letter-spacing: 0.03em;
  }
  span.title {
    align-self: flex-start;
    color: #fff;
    position: absolute;
    left: 40px;
  }
  a {
    margin: 0 25px;
    font-weight: lighter;
    color: #fff;
    display: inline-block;
    vertical-align: top;
    &.router-link-active {
      text-decoration: underline;
    }
  }
}
.empty-data {
  text-align: center;
  font-size: 26px;
}
.pull-right {
  float: right;
}